<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { centerMap, GETNOBASE } from "@/api";
import { registerMap, getMap } from "echarts/core";
import { optionHandle, regionCodes } from "./center.map";
import BorderBox13 from "@/components/datav/border-box-13";
import { ElMessage } from "element-plus";
import { FIXED_CITIES,tjzy,tjajl,tjajly,kpidata,top5,dsrfx } from "../index";
import type { MapdataType } from "./center.map";
import {
  dtyjList,
  getzjqkList,
  tjjgList,
  tjryList,
  tjajList,
  ajlyList,
  kpiList,
  top5List,
  dsrfxList
} from '@/api/service'

const option = ref({});
const code = ref("530000"); // 530000 代表云南省，作为最高级

withDefaults(
  defineProps<{
    // 结束数值
    title: number | string;
  }>(),
  {
    title: "地图",
  }
);

const dataSetHandle = async (regionCode: string, list: object[]) => {
  // 如果是云南省，强制只显示固定的市级数据
    list = FIXED_CITIES.map(city => ({
      name: city.name,
      value: city.value
    }));

  const geojson: any = await getGeojson(regionCode);
  let cityCenter: any = {};
  let mapData: MapdataType[] = [];
  //获取当前地图每块行政区中心点
  geojson.features.forEach((element: any) => {
    cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
  });
  //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
  list.forEach((item: any) => {
    if (cityCenter[item.name]) {
      mapData.push({
        name: item.name,
        value: cityCenter[item.name].concat(item.value),
      });
    }
  });
  await nextTick();

  option.value = optionHandle(regionCode, list, mapData);
};

const getData =  (regionCode: string,ty:string) => {
  centerMap({ regionCode: regionCode })
    .then(async(res) => {
      console.log("中上--设备分布", res);
      if (res.success) {
          let parm = {
            xzdq: regionCode,
            type: ty,
            beginTime: '2024-01-01',
            engTime: '2025-12-30'
          }
          let dtjy:any = await dtyjList(parm)
          
          FIXED_CITIES.length = 0
        for (let i = 0; i < dtjy.length; i++) {
            let p = {
              name: dtjy[i].namd,
              value: dtjy[i].jn 
           }
          FIXED_CITIES.push(p)
        }
        let zjqk: any = await getzjqkList(parm)
        let tjjg: any = await tjjgList(parm)
        let tjry: any = await tjryList(parm)
        tjzy.sfj= zjqk.sfj
        tjzy.sfs= zjqk.sfs
        tjzy.tjzz= zjqk.tjzz
        tjzy.cjtwh=tjjg.cjtwh
        tjzy.qsydwtwh=tjjg.qsydwtwh
        tjzy.xjtwh=tjjg.xjtwh
        tjzy.xztwh = tjjg.xztwh
        tjzy.jz = tjry.jz
        tjzy.zz = tjry.zz
        
        let tjaj:any = await tjajList(parm)
        let ajly:any = await ajlyList(parm)
        let kpi:any = await kpiList(parm)
        dataSetHandle(res.data.regionCode, res.data.dataList);
        let top:any = await top5List(parm)
        let dsrf:any = await dsrfxList(parm)

        let total = tjaj.hztj + tjaj.rmtj + tjaj.sstj + tjaj.zxtj
        tjajl.length = 0 
        for (let item in tjaj) {
           let p = {
                name: '',
                num: 0,
                percent: ''
          }
          if (item == 'rmtj') {
            p.name= '人民调解',
            p.num = tjaj[item]/10000,
              p.percent = ((tjaj[item] / total)*100).toFixed(2) 
            tjajl.push(p)  
            continue 
          }
          if (item == 'hztj') {
            p.name= '行专调解',
            p.num = tjaj[item]/10000,
            p.percent = ((tjaj[item] / total)*100).toFixed(2) 
            tjajl.push(p)   
            continue
          }
          if (item == 'sstj') {
            p.name= '商事调解',
            p.num = tjaj[item]/10000,
            p.percent =((tjaj[item] / total)*100).toFixed(2) 
            tjajl.push(p)   
            continue
          }
          if (item == 'zxtj') {
            p.name= '行政调解',
            p.num = tjaj[item]/10000,
            p.percent = ((tjaj[item] / total)*100).toFixed(2) 
            tjajl.push(p)   
          }
        }

        tjajly.length = 0
        for (let i = 0; i < ajly.length; i++) {
          tjajly.push(ajly[i])
        }
        for (let item in kpi) {
          kpidata[item] = kpi[item]
        }

        top5.length = 0
        for (let i = 0; i < top.length; i++) {
          top5.push(top[i])
        }

        console.log('22222',dsrf);
        dsrfx.length = 0
        for (let i = 0; i < dsrf.dsrFxPos.length; i++) {
          dsrfx.push(dsrf.dsrFxPos[i])
        }
       
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const getGeojson = (regionCode: string) => {
  return new Promise<boolean>(async (resolve) => {
    let mapjson = getMap(regionCode);
    if (mapjson) {
      mapjson = mapjson.geoJSON;
      resolve(mapjson);
    } else {
      mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
      code.value = regionCode;
      registerMap(regionCode, {
        geoJSON: mapjson as any,
        specialAreas: {},
      });
      resolve(mapjson);
    }
  });
};
getData('530000000000','99');

const mapClick = (params: any) => {
  console.log(params);
  let xzqData = regionCodes[params.name];
  console.log(xzqData,'1234445454');
  
  if (xzqData) {
    getData(xzqData.adcode,'01');
  } else {
    window["$message"].warning("暂无下级地市");
  }
};
</script>

<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <BorderBox13>
        <div class="quanguo" @click="getData('530000000000','99')" >云南省</div>
        <v-chart
          class="chart"
          :option="option"
          ref="centerMapRef"
          @click="mapClick"
          v-if="JSON.stringify(option) != '{}'"
        />
      </BorderBox13>
    </div>
  </div>
</template>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 580px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
</style>
